import React,{Component} from "react";
import {connect} from "react-redux";
import {fetchlist,addToCart,Todetails} from "../action";
import {NavLink} from 'react-router-dom';
const mapStateToProps=(state)=>{
    // console.log(state.lists);
    return{
        rows:state.counter.lists.rows,
        totle:state.counter.lists.totle
    }
}
 class Product extends Component{
     componentDidMount(){
        this.props.fetchlist();
     }
     changepage(page){
        this.props.fetchlist({page});
     }
     showpage(){
         var pages=Math.ceil(this.props.totle/6)
         var jsx=[];
         for(let i=1;i<=pages;i++){
             jsx.push(<li className="page-item" key={i} onClick={()=>{this.changepage(i)}}><a className="page-link" href="javascript:void(0)">{i}</a></li>)
         }
         return jsx;
     }
     addtocarts=(item)=>{
         this.props.addToCart(item);
     }
     todetails=(item)=>{
        this.props.Todetails(item);
     }
     showrows(){
         var jsx=[];
        this.props.rows.map((item,index)=>{
            var detailurl='product/'+item.id;
            jsx.push( 
            <div key={index} className="col-md-4">
             <div className="card" style={{width:300,height:700}}>
                <img src={item.img} className="card-img-top" style={{width:300,height:300}} alt=""/>
                <div className="card-body">
                    <h4 className="card-title producth5">{item.title}</h4>
                    <p className="card-text productp">{item.content}</p>
                    <NavLink to={detailurl} onClick={()=>this.todetails(item)} className="btn btn-primary productbutton">详情</NavLink>
                    <button className="btn btn-primary productbutton" onClick={()=>this.addtocarts(item)}>加入购物车</button>
                </div>
              </div>
            </div>
            )
        })
        return jsx;
     }
    render() {
        const {rows,totle}=this.props;
        // console.log(rows);
        return(
            <div className="container">
                {this.showrows()}
                <nav aria-label="Page navigation example" className="col-md-12">
                    <ul className="pagination">
                    <li className="page-item"><a className="page-link" href="#">Previous</a></li>
                    {this.showpage()}
                    <li className="page-item"><a className="page-link" href="#">Next</a></li>
                    </ul>
                </nav>
            </div>
        )
    }
}
export default connect(mapStateToProps,{fetchlist,addToCart,Todetails})(Product);